<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>addEdu</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link href="./css/reset.css" rel="stylesheet">
    <!-- Bootstrap3.3.5 CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/queryResult.css" rel="stylesheet">
    <link href="/static/css/addEdu1.css" rel="stylesheet">
    <style type="text/css">
        .input_text{
            width: 100%;
        }
    </style>
</head>
<body>

    <div id="popout" style="display: none">
        <div class="popout">
            <div class="">举报成功!我们正在认真审核您的举报，感谢您的支持</div>
            <p><button type="button" name="button">好的</button></p>
        </div>
    </div>

<div class="container">
    <div class="queryResule">
        <h2>音乐举报</h2>
        <div class="back" style="background-color: aliceblue;padding: 10px">
            <a href="/index">返回首页</a>
        </div>
        <form action="/addEdu" method="post" name="addForm" style="margin-top: 20px">
          <div class="top">
              <div class="left">
                  <p>
                      <span>歌曲名称：</span>
                      <span>
                        <input type="text" id="id-name" name="Name" class="input_text">
                      </span>
                  </p>

                  <p>
                      <span>基本信息描述</span>
                      <span>
                           <input type="text" id="id-user" name="User" class="input_text">
                      </span>
                  </p>
                  <p>
                      <span>举报链接：</span>
                      <span>
                          <input type="text" id="id-url" name="Url" class="input_text">
                      </span>
                  </p>
              </div>


          </div>
          <input type="hidden" name="photo" id="photo" value=""/>
          <button type="button" name="button" class="btn" style="background-color: aliceblue;color: blue;margin: 20px">发起举报</button>
        </form>
    </div>
    <!-- data-backdrop="false"去除遮罩层  -->
    <div class="modal fade bd-example-modal-sm"  id="myModal" role="dialog" data-backdrop="false"  aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <p class="text-center mb-0" style="height:42px;line-height:42px;margin:0;">
                    <i class="fa fa-check-circle text-success mr-1" aria-hidden="true"></i>
                    请输入侵权所必需的相关信息
                </p>
            </div>
        </div>
    </div>

</div>
</body>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function() {

        var artImg;
        function uploadFile(type) {
            event.stopPropagation();
            let formData = new FormData();
            if( type == "img"){
                formData.append('file', $('#file')[0].files[0]);
            }
            $.ajax({
                url: '/upload',
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                dataType: "json",
                contentType: false
            }).done(function (res) {
                if (res.error == "0") {
                    if( type == "img"){
                        $('.uploadImg img').attr('src',res.result.path);
                        $('#photo').val(res.result.path)
                        return artImg = res.result.path;
                    }
                } else {
                    alert("上传失败！" + res.result.msg)
                }
            }).fail(function (res) { });
        }

        var inputs = $('input[type="text"]');
        // 提交按钮
        $('.btn').click(function() {
            var name = $("#id-name").val();
            var url = $("#id-url").val();
            var user = $("#id-user").val();
            var user1=localStorage.getItem("loginUserNow");
            var id = user1.split("-")[1];

            var reportId = new Date().getTime();

            localStorage.setItem("description",$("#description").val());
            var param = "report-"+reportId+"-"+id+"-"+name+"-"+ user+"-"+ url;
            $.get("/invoke",{param:param},function(result){
                console.log(result);
                var js =[];
                localStorage.setItem("reportItem",param);
                var s = localStorage.getItem("judges");
                if(s){
                    js = JSON.parse(s)
                }
                var r=JSON.parse(result);
                if(r.code=='0'){

                        $('#popout').css('display','block');

                }
            });

        })
    })
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.popout button').on('click',function() {
            $('#popout').css('display','none');
        })
    })
</script>
<style type="text/css">
    #popout{
        width: 100%;
        height: 100%;
        font-family: '微软雅黑';
        background-color: rgba(0,0,0,.5);
        position: absolute;
        z-index: 1;
        display: block;
    }
    .popout{
        width: 500px;
        height: auto;
        line-height: 30px;
        color: #000;
        font-size: 20px;
        background: #fff;
        padding: 30px;
        text-align: left;
        position: relative;
        left:50%;
        top: 200px;
        margin-left:-250px;
        z-index:1;
        border-radius: 2px;
    }
    .popout>div,.popout>div p{
        width: 100%;
        font-family: '微软雅黑';
        word-break: break-all;
        word-wrap: break-word;
    }
    .popout>div p:nth-of-type(1){
        color: #333;
        font-size: 20px;
        font-weight: bolder;
    }
    .popout>div p:nth-of-type(2){
        color: #58666e;
        font-size: 16px;
    }
    .popout>p{
        text-align: right;
    }
    .popout>p button{
        width: 100px;
        height: 40px;
        line-height: 40px;
        border: none;
        border-radius: 6px;
        outline: none;
        color: #fff;
        font-size: 18px;
        background-color: #3288e6;
        font-family: '微软雅黑';
        cursor: pointer;
    }
</style>
</html>
